<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片处理</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">

    </style>
</head>
<body class="gray-bg">
<form class="form-horizontal m-t" id="commentForm" method="post" action="{:url('car/psimg')}" style="margin:0;padding:0;">
    <!--
    <div class="form-group">
        <div class="col-sm-4 col-sm-offset-5">
            <button class="btn btn-primary" onclick="return sure(this);">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-default" onclick="return cancel(this);">取消</button>
        </div>
    </div>
    -->
    <div id="img" class="img" style="position:relative;"><div class="img_div" style="position:absolute;left:0;top:0;width:100%;height:100%;"></div><img data-box='{"left":0,"top":0,"width":0,"height":0,"image":{$data.image_url}}' src="{$data['image_url']}" style="width:100%;"/></div>
    <div class="canvas" style="background:#ffffff;width:0;height:0;position: absolute;left:0;top:0;display:none;"></div>
    <!--
    <div class="form-group" style="margin-top:15px;">
        <div class="col-sm-4 col-sm-offset-5">
            <button class="btn btn-primary" onclick="return sure(this);">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-default" onclick="return cancel(this);">取消</button>
        </div>
    </div>
    -->
</form>
</div>
<script src="__JS__/jquery.min.js?v=2.1.4"></script>
<script src="__JS__/bootstrap.min.js?v=3.3.6"></script>

<script type="text/javascript">
    var tag=0;
    var start=null;
    function sure(_this) {
        var mybox=$(".img");
        var box={"left":0,"top":0,"width":0,"height":0};
        var img=mybox.find("img");
        var data=[];
        if(mybox.find(".canvas").length>0){
            var canvas=mybox.find(".canvas");
            var pos = canvas.position();
            box.left=pos.left;
            box.top=pos.top;
            box.width=canvas.width();
            box.height=canvas.height();
            if(box.width<1 || box.height<1) return false;
            var img2=$("<img style='position:absolute;left:0;top:0;z-index:-100;' src='"+img.attr("src")+"'/>");
            $("body").append(img2);
            //data=[img.width(),img.height(),img2.width(),img2.height()];

            img2.hide();
            data=[box.left,box.top,box.width,box.height];
        }
        alert(data);
        return false;
    }
    function cancel(_this) {
        var box={"left":0,"top":0,"width":0,"height":0};
        var can=$(".canvas");
        can.css(box);
        $("body").append(can);
        tag=0;
        return false;
    }
    $(document).ready(function () {
        $(".img").each(function () {
            $(this).find(".img_div").css({"width":$(this).find("img").width(),"height":$(this).find("img").height()});
        });

        $(".img_div").mousedown(function(event){
            tag++;
            var img_div=$(this);
            var img=$("#img img");
            var offset = $(this).offset();
            var box={"left":0,"top":0,"width":0,"height":0};
            start=event;
            if(tag>1){
                return false;
            }else{
                var can=$(".canvas");
                img_div.append(can);
                can.show();
                $(".img_div").mousemove(function (event) {
                    if(tag>1 || img_div.find(".canvas").length<1) return false;
                    box.width=Math.abs(event.pageX-start.pageX);
                    box.height=Math.abs(event.pageY-start.pageY);
                    //var box={"width":Math.abs(event.pageX-start.pageX),"height":Math.abs(event.pageY-start.pageY)};
                    box.left=Math.min(event.pageX-offset.left,start.pageX-offset.left);
                    box.top=Math.min(event.pageY-offset.top,start.pageY-offset.top);
                    if(box.left<0 || box.top<0){
                        box.left=box.top=box.width=box.height=0;
                    }
                    can.css(box);
                });
                $(".img_div").mouseup(function (event) {
                    if(tag>1 || img_div.find(".canvas").length<1) return false;
                    tag++;
                    box.width=Math.abs(event.pageX-start.pageX);
                    box.height=Math.abs(event.pageY-start.pageY);
                    //var box={"width":Math.abs(event.pageX-start.pageX),"height":Math.abs(event.pageY-start.pageY)};
                    box.left=Math.min(event.pageX-offset.left,start.pageX-offset.left);
                    box.top=Math.min(event.pageY-offset.top,start.pageY-offset.top);
                    if(box.left<0 || box.top<0){
                        box.left=box.top=box.width=box.height=0;
                    }
                    can.css(box);
                    var data=box;
                    data.image=img.attr("src");
                    var img2=$("<img style='position:absolute;left:0;top:0;z-index:-100;' src='"+data.image+"'/>");
                    $("body").append(img2);
                    var w=img2.width()/img.width(),h=img2.height()/img.height();
                    data.width=Math.round(data.width*w);
                    data.left=Math.round(data.left*w);
                    data.height=Math.round(data.height*h);
                    data.top=Math.round(data.top*h);
                    //data=[img.width(),img.height(),img2.width(),img2.height()];
                    img2.hide();
                    $("#img").attr("data-box", JSON.stringify(data));

                })
            }

        });
    })
</script>
</body>
</html>
